<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { UserFilled, Lock, User, Phone, Message } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-loading.css';
import 'element-plus/theme-chalk/el-message.css';
import { loginApi, signUpApi } from '../apis/loginApi'
//声明变量
const router = useRouter();
const input1 = ref('');
const input2 = ref('');
const input3 = ref('');
const input4 = ref('');
const input5 = ref('');
const input6 = ref('');
const input7 = ref('');
const input8 = ref('');
const show = ref(true);
// let signUpData={
//   email: input4.value,
//   imageUrl: "https://xqq-1319219555.cos.ap-chengdu.myqcloud.com/hospital%2F32401689399578696.png",
//   name: input6.value,
//   password: input7.value,
//   password2: input8.value,
//   phone: input5.value,
//   username: input3.value
// }
//声明方法
const toSignUp = () => {
    if (show.value) {
        input1.value = '';
        input2.value = '';
    } else {
        input3.value = '';
        input4.value = '';
        input5.value = '';
        input6.value = '';
        input7.value = '';
        input8.value = '';
    }
    show.value = !show.value;
}
const toHome = async () => {
    const { data }: { [propsName: string]: any } = await loginApi({ username: input1.value, password: input2.value })
    if (data.code == 0) {
        ElMessage({
            type: 'success',
            message: '登录成功'
        })
        let token: any = data.data;
        sessionStorage.clear();
        sessionStorage.setItem('token',token);
        let arrToken = token.split(".");
        let str = arrToken[1];
        let user = JSON.parse(decodeURIComponent(escape(window.atob(str))));
        let users=JSON.parse(user.perms) 
        sessionStorage.setItem('perms',JSON.stringify(users));
        router.push('/home');
    } else {
        ElMessage({
            type: 'error',
            message: data.msg
        })
    }

}
const signUp = async () => {
    if (input7.value !== input8.value) {
        return ElMessage({
            type: 'error',
            message: '两次密码输入不一致'
        })
    }
    const { data }: { [propsName: string]: any } = await signUpApi({
        email: input4.value,
        imageUrl: "https://xqq-1319219555.cos.ap-chengdu.myqcloud.com/hospital%2F32401689399578696.png",
        name: input6.value,
        password: input7.value,
        password2: input8.value,
        phone: input5.value,
        username: input3.value
    })
    if (data.code == 0) {
        ElMessage({
            type: 'success',
            message: '注册成功'
        })
        toSignUp()
    }else{
        ElMessage({
            type: 'error',
            message: data.msg
        })
    }

}
</script>
<template>
    <div class="login">
        <div class="flex" v-show="show">
            <h1>在线体检预约管理系统</h1>
            <el-input v-model="input1" placeholder="请输入用户名" class="zlj-int" :prefix-icon="UserFilled" />
            <el-input v-model="input2" type="password" class="zlj-int" placeholder="请输入密码" show-password
                :prefix-icon="Lock" @keyup.enter="toHome"/>
            <div class="buttons">
                <el-button class="btn1" link type="primary" @click="toSignUp">没有账号？点击注册</el-button>
                <el-button class="btn2" type="success" @click="toHome">登陆</el-button>
            </div>
        </div>
        <div class="flex2" v-show="!show">
            <h1>在线体检预约管理系统</h1>
            <el-input v-model="input3" placeholder="请输入注册账号" class="zlj-int" :prefix-icon="UserFilled" />
            <el-input v-model="input4" placeholder="请输入email" class="zlj-int"><template #prefix>
                    <el-icon class="el-input__icon">
                        <Message />
                    </el-icon>
                </template></el-input>
            <el-input v-model="input5" placeholder="请输入手机号码" class="zlj-int" :prefix-icon="Phone">
            </el-input>
            <el-input v-model="input6" placeholder="请输入昵称" class="zlj-int" :prefix-icon="User" />
            <el-input v-model="input7" type="password" class="zlj-int" placeholder="请输入密码,必须含有大小写字母" show-password
                :prefix-icon="Lock">
            </el-input>
            <el-input v-model="input8" type="password" class="zlj-int" placeholder="请再次确认密码" show-password
                :prefix-icon="Lock">
            </el-input>
            <div class="buttons">
                <el-button class="btn1" link type="primary" @click="toSignUp">有账号？点击这里去登陆</el-button>
                <el-button class="btn2" type="success" @click="signUp">注册管理员</el-button>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.login {
    height: 100vh;
    width: 100%;
    background-image: url(../assets/zljImage/login.webp);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;

    .flex {
        width: 500px;
        height: 340px;
        background-color: rgba(43, 50, 61, 0.5);
        display: flex;
        justify-content: center;
        align-content: flex-start;
        flex-wrap: wrap;

        h1 {
            height: 40px;
            color: rgb(140, 196, 206);
            font-size: 26px;
            border-bottom: 1px solid #bbe5e5;
        }

        .buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 15px;
        }

        .btn1 {
            display: block;
            width: 200px;
        }

        .btn2 {
            display: block;
            width: 200px;
            font-size: 20px;
            height: 38px;
            margin-top: 15px;
            /* 添加此行 */
        }
    }

    .flex2 {
        width: 500px;
        height: 540px;
        background-color: rgba(43, 50, 61, 0.5);
        display: flex;
        justify-content: center;
        align-content: flex-start;
        flex-wrap: wrap;

        h1 {
            height: 40px;
            color: rgb(140, 196, 206);
            font-size: 26px;
            border-bottom: 1px solid #bbe5e5;
        }

        .buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 15px;
        }

        .btn1 {
            display: block;
            width: 200px;
        }

        .btn2 {
            display: block;
            width: 200px;
            font-size: 20px;
            height: 38px;
            margin-top: 15px;
            /* 添加此行 */
        }
    }

    .zlj-int {
        width: 360px;
        height: 40px;
        margin-bottom: 15px;
    }
}
</style>
<style lang="less">
body {
    margin: 0;
    padding: 0;
}
</style>